<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Object-oriented JavaScript example</title>
</head>

<body>
  <div>
    <label for="jscode">Enter code:</label>
    <input type="text" id="jscode">
    <button>Submit code</button>
  </div>

  <p></p>
</body>

<script>
  var input = document.querySelector('input');
  var btn = document.querySelector('button');
  var para = document.querySelector('p');
  btn.onclick = function () {
    var code = input.value;
    para.textContent = eval(code);
  }

  var person = {};
  person = {
    name: ['Bob', 'Smith'],
    age: 32,
    gender: 'male',
    interests: ['music', 'skiing'],
    bio: function () {
      alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
    },
    greeting: function () {
      alert('Hi! I\'m' + this.name[0] + '.')
    }
  }
  function createNewPerson(name) {
    var obj = {};
    obj.name = name;
    obj.greeting = function () {
      alert('Hi! I\'m ' + this.name);
    }
    return obj;
  }
  var salva = createNewPerson('salva');

  var person1 = new Object({
    name: 'Chris',
    age: 38,
    greeting: function () {
      alert('Hi I\'m ' + this.name + '.')
    }
  })

// 我们还可以编写一个createStudent()函数，在内部封装所有的new操作。一个常用的编程模式像这样：
function Student(props) {
    this.name = props.name || '匿名'; // 默认值为'匿名'
    this.grade = props.grade || 1; // 默认值为1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

function createStudent(props) {
    return new Student(props || {})
}
var xiaoming = createStudent({
    name: '小明'
});

xiaoming.grade; // 1
</script>

</html>